<template>
    <div class="page-container">
        <el-row :gutter="20">
            <el-col :span="3">
                <el-button type="primary" plain size="small" @click="addCategory">+ 添加分类</el-button>
                <el-divider />
                <el-tree v-if="treeData.length > 0" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" size="mini">
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">
                            <span>{{ node.label }}</span>
                            <span>
                                <a @click="editCategory(data)"> <el-icon :size="size" :color="color">
                                        <ele-Edit />
                                    </el-icon> </a>
                                <a style="margin-left: 8px" @click="removeCategory(node, data)"> <el-icon :size="size"
                                        :color="color">
                                        <ele-Delete />
                                    </el-icon> </a>
                            </span>
                        </span>
                    </template>
                </el-tree>
            </el-col>
            <el-col :span="21">
                <el-form :inline="true" :model="search" size="small" ref="searchForm">
                    <el-form-item label="问题名称:">
                        <el-input placeholder="问题名称" v-model="search.name" @change="filterSubmit" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="题型:">
                        <el-select v-model="search.type" placeholder="请选择题型" @change="filterSubmit" clearable>
                            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="filterSubmit">查询</el-button>
                        <el-button @click="reset()">重置</el-button>
                    </el-form-item>
                </el-form>

                <el-row>
                    <el-button size="small" type="primary" @click="add">添加题目</el-button>
                </el-row>
                <div class="table-list">
                    <el-table :data="list" size="small">
                        <!-- <el-table-column label="ID" prop="id"></el-table-column> -->
                        <el-table-column label="名称" prop="name"></el-table-column>
                        <el-table-column label="题型" prop="type">
                            <template #default="scope">
                                <template v-for="item in typeOptions">
                                    <el-tag effect="plain" v-if="item.value == scope.row.type" size="mini">{{ item.label
                                    }}</el-tag>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="备注" prop="descs"></el-table-column>
                        <el-table-column label="添加时间" prop="createTime"></el-table-column>
                        <el-table-column label="操作" align="center" fixed="right">
                            <template #default="scope">
                                <el-button type="primary" link size="small" @click="editRow(scope.row)">修改</el-button>
                                <el-button type="primary" link size="small" @click="delRow(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page-block">
                    <el-pagination v-model:currentPage="current" v-model:page-size="page" :page-sizes="[10, 20, 30, 40]"
                        :small="true" :disabled="false" :background="false"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </div>
            </el-col>
        </el-row>

        <question-detail v-model:dialogDrawer="dialogFormVisible" :defaultForm="form" :title="title"
            @onDetailSubmit="onDetailSubmit" :categoryOptions="treeData"></question-detail>
        <question-category-detail v-model:dialogDrawer="dialogCategoryFormVisible" :defaultForm="form" :title="title"
        @onDetailSubmit="onDetailSubmit" ></question-category-detail>
    </div>
</template>
  
<script>
import { reactive, toRefs, watch, onMounted } from 'vue'
import QuestionDetail from './QuestionDetail.vue'
import QuestionCategoryDetail from './QuestionCategoryDetail.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { pageList, get, updateStatus, remove } from '/@/api/qn/question'
import { getList as getCategoryList,get as getCategoryById,remove as removeCategoryById } from '/@/api/qn/category'
export default {
    name: 'QuestionListDetail',
    components: {
        QuestionDetail,
        QuestionCategoryDetail
    },
    props: {
        activeName: {
            type: String,
            default: null
        }
    },
    setup(props) {
        const {
            activeName
        } = toRefs(props)
        watch(() => activeName.value,
            (newVal, oldVal) => {
                console.log(newVal)
                if (newVal == 'second') {
                    getList()
                }
            }
        )
        const state = reactive({
            list: [],
            search: {
                current: 1,
                size: 10,
                paperId: '0',
            },
            title: '新增',
            form: {},
            dialogFormVisible: false,
            dialogCategoryFormVisible:false,
            total: 100,
            current: 1,
            page: 10,
            statusOptions: [
                {
                    value: '0',
                    label: '未发布',
                },
                {
                    value: '1',
                    label: '已发布',
                },
            ],
            typeOptions: [{
                value: '1',
                label: '单选',
            },
            {
                value: '2',
                label: '填空',
            },
            {
                value: '3',
                label: '简答题',
            }, {
                value: '4',
                label: '判断',
            }, {
                value: '5',
                label: '多选',
            }],
            treeData: [{
                label: 'Level one 1',
            },
            {
                label: 'Level one 2',
            }],
            defaultProps: {
                children: 'children',
                label: 'name',
            }
        })

        const handleNodeClick = (val) => {
            state.search.categoryId = val.id
            getList()
        }

        const add = () => {
            restForm()
            state.title = '新增题目'
            state.dialogFormVisible = true
        }
        const editRow = row => {
            state.title = '编辑题目'
            get(row.id).then(res => {
                state.form = res.data
                state.form.type = res.data.type + ''
            })
            state.dialogFormVisible = true
        }
        const restForm = () => {
            state.form = {
                id: null,
                type: '',
                name: null,
                descs: null,
                qnChoices: [{
                    orderNo: 1,
                    indexLetter: 'A',
                    content: null
                }]
            }
        }
        const delRow = row => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.name + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                remove(row.id).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败：' + res.message,
                        })
                    }
                })

            }).catch()
        }
        const getList = () => {
            pageList(state.search).then(res => {
                state.list = res.data.records
                state.total = res.data.total
            })
        }
        const handleSizeChange = e => {
            state.search.size = e
            getList()
        }
        const handleCurrentChange = e => {
            state.current = e
            state.search.current = e
            getList()
        }
        const onDetailSubmit = () => {
            if(state.dialogFormVisible){
                getList()
                state.dialogFormVisible = false
            }else if(state.dialogCategoryFormVisible){
                getCategory()
                state.dialogCategoryFormVisible = false
            }
           
        }
        const changeStatus = (row) => {
            updateStatus({ id: row.id, status: row.status }).then(res => {
                if (res.code == 0) {
                    ElMessage.success('修改成功')
                    getList()
                } else {
                    ElMessage.error('修改失败:' + res.message)
                }
            })
        }
        const filterSubmit = () => {
            state.search.current = 1
            getList()
        }
        const reset = () => {
            state.search = {
                current: 1,
                size: 10,
                type: '',
                name: '',
                paperId: '0'
            }
            getList()
        }
        const getCategory = () => {
            getCategoryList().then(res=>{
                state.treeData = res.data
            })
        }
        const addCategory = () => {
            restCategoryForm()
            state.title  = '添加分类'
            state.dialogCategoryFormVisible = true
        }
        const restCategoryForm = () => {
            state.form = {
                id: null,
                name: null,
                descs: null,
            }
        }
        const editCategory = (data) => {
            state.title = '编辑分类'
            getCategoryById(data.id).then(res => {
                state.form = res.data
            })
            state.dialogCategoryFormVisible = true
        }
        const removeCategory = (node,data) => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + data.name + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                removeCategoryById(data.id).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        getCategory()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败：' + res.message,
                        })
                    }
                })

            }).catch()
        }
        
        onMounted(() => {
            getList()
            getCategory()
        })
        return {
            add,
            editRow,
            delRow,
            handleSizeChange,
            handleCurrentChange,
            onDetailSubmit,
            restForm,
            changeStatus,
            filterSubmit,
            reset,
            handleNodeClick,
            getCategory,
            addCategory,
            removeCategory,
            editCategory,
            ...toRefs(state)
        }
    }
}
</script>
  
<style lang="scss" scoped>
.page-container {
    .table-list {
        background: var(--next-color-white);
        margin-top: 10px;

        :deep(.el-table__header-wrapper .el-table__cell) {
            background: var(--el-color-primary-light-9);
            color: var(--next-bg-menuBar-light-1);
        }
    }
}
</style>